<template>
  <div class="container">
    <div class="kkModule">
      <Module :cfg="moduleCfg[0]">
        <HBarChart :data="hBarData" :cfg="hBarChartCfg"></HBarChart>
      </Module>
      <div class="kkModule-sub"></div>
    </div>

    <div class="kkModule">
      <Module :cfg="moduleCfg[1]">
        <PieChart :data="pieData" :cfg="pieChartCfg" v-if="Object.keys(pieData).length > 0"></PieChart>
      </Module>
      <div class="kkModule-sub"></div>
    </div>

    <div class="kkModule">
      <Module :cfg="moduleCfg[2]">
        <MultLineChart :data="multLineData" :cfg="multLineChartCfg"></MultLineChart>
      </Module>
      <div class="kkModule-sub"></div>
    </div>

    <div class="kkModule">
      <Module :cfg="moduleCfg[3]">
        <VBarChart :data="vBarData" :cfg="vBarChartCfg"></VBarChart>
      </Module>
      <div class="kkModule-sub"></div>
    </div>

  </div>
</template>

<script>
  import Module from 'comp/common/Module';
  import HBarChart from 'kkui/echarts/HBarChart';
  import VBarChart from 'kkui/echarts/VBarChart';
  import PieChart from 'kkui/echarts/PieChart';
  import MultLineChart from 'kkui/echarts/MultLineChart';

  export default {
    name: "Charts",
    components: {
      Module,
      HBarChart,
      VBarChart,
      PieChart,
      MultLineChart
    },
    data() {
      return {
        moduleCfg: [
          {
            icon: WebCfg.icons.allCameraInfo,
            title: `摄像机运行总览`
          },
          {
            icon: WebCfg.icons.errorCameraInfo,
            title: `摄像机故障类型分布`
          },
          {
            icon: WebCfg.icons.errorAndFixCount,
            title: `一月内摄像机故障发生及修复统计`
          },
          {
            icon: WebCfg.icons.brandErrorInfo,
            title: `各品牌摄像机故障统计`
          },
        ],


        hBarData: {},
        hBarChartCfg: {
          left: 30,
          right: 30,
          barWidth: 50,
          labelFontSize: 20,
          fontBottom: 30,
          numBottom: 30,
          unit: '台'
        },

        pieData: {},
        pieChartCfg: {
          radius: ['55%', '80%'],
          legendFontSize: 18,
          legendRight: 10,
          right: '10%',
          bigFontSize: 20,
          smallFontSize: 16,
          unit: '台'
        },

        multLineData:{},
        multLineChartCfg:{
          bottom:40,
          splitLineColor: '#666',
          rotate:20,
          labelPrefix: new Date().getMonth() + 1 + '月',
          labelSuffix: '日'
        },

        vBarData:{},
        vBarChartCfg:{
          top: 30,
          bottom: 10,
          minInterval: 5,
          barWidth: 30,
          splitLineColor: '#666',
          axisLabelFontSize: 16
        }

      }
    },
    mounted() {
      this.getChartData();
    },
    methods: {
      getChartData() {
        this.$server('camera.fault').then(data => {

          const hBarData = {name: [], value: [], allNum: 0};
          data['cameraTjList'].forEach(item => {
            hBarData.name.push(item.name);
            hBarData.value.push(item.value);
            hBarData.allNum += item.value;
          });
          this.hBarData = hBarData;

          this.pieData = data['cameraFaultList'];


          // data['faultList'], data['repairList']
          let values = [[], []];
          const getMonths = () => {
            const t = new Date(), y = t.getFullYear(), m = t.getMonth() + 1;
            let a = [];
            while (a.length < new Date(y, m, 0).getDate()) {
              values[0].push(Math.ceil(Math.random() * 20));
              values[1].push(Math.ceil(Math.random() * 10));
              a.push(a.length + 1);
            }
            return a;
          };

          this.multLineData = {
            name: ['故障', '修复'],
            label: data['faultList'].map(item=>item.dateStr),
            value: [data['faultList'].map(item=>item.faultCount),data['repairList'].map(item=>item.faultCount)]
          };



          const vBarData = {name: [], value: []};
          data['brandFaultList'].forEach(item => {
            vBarData.name.push(item['manufacturer']);
            vBarData.value.push(item['brandCount']);
          });
          this.vBarData=vBarData;

        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
    align-items: center;

    .kkModule {
      width: 35%;
      height: 40%;
    }
  }
</style>
